<template>
  <div class="loginRegister">
    <div class="content">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="登录" name="login"></el-tab-pane>
        <el-tab-pane label="注册" name="register"></el-tab-pane>
      </el-tabs>
      <div class="from">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          label-position="top"
          status-icon
        >
          <el-form-item label="手机号" prop="userName">
            <el-input v-model="ruleForm.userName" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="codeBox">
              <el-input v-model="ruleForm.code" class="input" />
              <el-button type="primary" :disabled="time !== sourceTime" @click="getCode">{{codeText}}</el-button>
            </div>
          </el-form-item>
          <div class="btns">
            <el-button type="primary">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive, ref, computed} from "vue";

  const activeName = ref('login')
  const ruleForm = reactive({
    userName: '',
    code: ''
  })
  const rules = reactive({
    userName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
    code: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
  })

  const sourceTime = 5
  const time = ref(sourceTime)

  const codeText = computed(() => {
    let text = `获取验证码`
    if(sourceTime === time.value) {
      return text
    }
    return `重新获取（${time.value}）`
  })

  const getCode = () => {
    time.value --
    const timeFn = setInterval(() => {
      time.value --
      if (time.value === 0) {
        clearInterval(timeFn)
        time.value = sourceTime
      }
    }, 1000)
  }
</script>

<style scoped lang="scss">
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
  }
  .loginRegister {
    width: 400px;
    height: 100%;
    margin: 0 auto;
    :deep(.el-tabs) {
      width: max-content;
      margin: 0 auto;
    }
    :deep(.el-tabs__nav-wrap::after) {
      display: none;
    }
    .from {
      width: 400px;
      height: 400px;
      padding: 12px;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 6px;
      box-sizing: border-box;
    }
    .codeBox {
      display: flex;
      width: 100%;
      .input {
        flex: 1;
        margin-right: 12px;
      }
    }
  }
</style>
